<!-- 右下角图标说明 -->
<template>
  <div class="left-bottom">
    <!-- 第一种显示方法 -->
    <el-table :data="iconStaticTableData" style="width: 100%" @current-change="handleCurrentChange" ref="multipleTableRef"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="30px" />
      <el-table-column label="图例">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <img :src="scope.row.imgUrl" alt="图标" style="width: 20px; height: 20px" />
            <span style="margin-left: 5px;">{{ scope.row.picIcon }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 第二种显示方法 -->
    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">图例</el-checkbox>
    <el-checkbox-group v-model="multipleSelection" @change="handleCheckedIconChange">
      <el-checkbox v-for="item in iconStaticTableData" :key="item.flag" :label="item" @change="handleCheckBox">
        <img :src="item.imgUrl" alt="图标" style="width: 20px; height: 20px" />
        {{ item.picIcon }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
import { stat } from "fs";
import { reactive, toRefs, onBeforeMount, onMounted, ref } from "vue";
export default {
  name: "RightBottom",
  emits: { handleShowWhich: null },
  setup(props, ctx) {
    const checkAll = ref(true)
    const isIndeterminate = ref(false)
    const state = reactive({
      drawerFigure: ref(false),
      multipleTableRef: ref(null),
      multipleSelection: [],
      iconStaticTableData: ref([
        {
          picIcon: "场馆",
          imgUrl: require("../../../assets/imgHome/mapIcon/venue.png"),
          flag: "venue",
        },
        {
          picIcon: "医院",
          imgUrl: require("../../../assets/imgHome/mapIcon/hospital.png"),
          flag: "hospital",
        },
        {
          picIcon: "医疗点",
          imgUrl: require("../../../assets/imgHome/mapIcon/医疗点-1.png"),
          flag: "venueMedicalPoint",
        },
        {
          picIcon: "任务车",
          imgUrl: require("../../../assets/imgHome/mapIcon/task-vehicle.png"),
          flag: "taskvehicle",
        },
        {
          picIcon: "待命车",
          imgUrl: require("../../../assets/imgHome/mapIcon/on-vehicle.png"),
          flag: "onvehicle",
        },
        {
          picIcon: "暂停调用",
          imgUrl: require("../../../assets/imgHome/mapIcon/notask-vehicle.png"),
          flag: "notaskvehicle",
        },
      ]),
      // 没用到
      isShowVenue: ref({ flag: "venue", bol: true }), //场馆
      isShowHosp: ref({ flag: "hospital", bol: true }), //医院
      isShowVenueMedicalPoint: ref({ flag: "venueMedicalPoint", bol: true }), //场馆医疗点
      isShowTaskAmbu: ref({ flag: "taskvehicle", bol: true }), //任务
      isShowNotaskAmbu: ref({ flag: "notaskvehicle", bol: true }), //暂停
      isShowOnambu: ref({ flag: "onvehicle", bol: true }), //待命
    });
    const handleCurrentChange = (val) => {
      // console.log(val)
    };
    const handleSelectionChange = (val) => {
      // console.log(val)
      state.multipleSelection = val;
      ctx.emit("handleShowWhich", state.multipleSelection);
    };


    const handleCheckAllChange = (val) => {
      // console.log(val)
      state.multipleSelection = val ? [...state.iconStaticTableData] : []
      isIndeterminate.value = false

      // 关联第一种显示方式
      handleSelectionChange(state.multipleSelection)
      if (val) {
        state.multipleTableRef.toggleAllSelection()
      } else {
        state.multipleTableRef.clearSelection()
      }
    }
    const handleCheckedIconChange = (value) => {
      // console.log(value)
      // console.log(state.iconStaticTableData.length)
      const checkedCount = value.length
      checkAll.value = checkedCount === state.iconStaticTableData.length
      isIndeterminate.value = checkedCount > 0 && checkedCount < state.iconStaticTableData.length

      // 关联第一种显示方式
      handleSelectionChange(value)
    }
    // 复选框一个个单选时的操作
    const handleCheckBox = (val, e) => {
      // console.log(val, e.target._value)
      if (e.target._value) {
        state.multipleTableRef.toggleRowSelection(e.target._value, undefined)
      }
    }

    onBeforeMount(() => { });
    onMounted(() => {
      // 显示方式一的默认全选
      state.multipleTableRef.toggleAllSelection();
      // 显示方式二的默认全选
      state.multipleSelection = [...state.iconStaticTableData]
    });
    const refState = toRefs(state);
    return {
      // 状态
      ...refState,
      // 事件处理
      handleCurrentChange,
      handleSelectionChange,
      checkAll,
      isIndeterminate,
      // checkedIcons,
      handleCheckAllChange,
      handleCheckedIconChange,
      handleCheckBox
    };
  },
};
</script>
<style scoped>
.left-bottom {
  width: 150px;
  position: absolute;
  bottom: 5px;
  left: 100px;
  /* z-index: 1; */
}

@media screen and (max-height:950px) {
  .left-bottom .el-table {
    display: none;
  }

  .left-bottom {
    width: 650px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
  }

  .left-bottom .el-checkbox,
  .left-bottom .el-checkbox-group {
    margin-left: 10px;
  }

  .left-bottom .el-checkbox {
    width: 60px;
  }
}

@media screen and (min-height:950px) {

  .left-bottom .el-checkbox {
    display: none;
  }
}
</style>